把旅遊攻略 跟照片整理一下

咒語: 設計一個文件管理器頁面，使用 Material-UI 的樹狀列表、表格和圖標組件，讓用戶管理文件和文件夾。

import React, { useState } from "react";
import {
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Collapse,
} from "@mui/material";
import {
  Folder as FolderIcon,
  InsertDriveFile as FileIcon,
  ExpandLess,
  ExpandMore,
} from "@mui/icons-material";

const initialFolders = const initialFolders = [
  {
    id: "folder-1",
    name: "旅行",
    type: "folder",
    children: [
      {
        id: "file-1",
        name: "旅遊攻略.pdf",
        type: "file",
      },
      {
        id: "file-2",
        name: "旅遊照片.jpg",
        type: "file",
      },
      {
        id: "file-3",
        name: "地圖.jpg",
        type: "file",
      },
    ],
  },
];

const FileManager = () => {
  const [folders, setFolders] = useState(initialFolders);
  const [openFolders, setOpenFolders] = useState([]);

  const toggleFolder = (folderId) => {
    if (openFolders.includes(folderId)) {
      setOpenFolders(openFolders.filter((id) => id !== folderId));
    } else {
      setOpenFolders([...openFolders, folderId]);
    }
  };

  return (
    <div>
      <h1>文件管理器</h1>
      <List>
        {folders.map((folder) => (
          <div key={folder.id}>
            <ListItem button onClick={() => toggleFolder(folder.id)}>
              <ListItemIcon>
                <FolderIcon />
              </ListItemIcon>
              <ListItemText primary={folder.name} />
              {openFolders.includes(folder.id) ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={openFolders.includes(folder.id)}>
              <List component="div" disablePadding>
                {folder.children.map((child) => (
                  <ListItem key={child.id} button>
                    <ListItemIcon>
                      <FileIcon />
                    </ListItemIcon>
                    <ListItemText primary={child.name} />
                  </ListItem>
                ))}
              </List>
            </Collapse>
          </div>
        ))}
      </List>
    </div>
  );
};

export default FileManager;

這樣一個可以整理資料的小系統就完成了